import Vue from 'vue'
import VueRouter from 'vue-router'

// 定义渲染的组件  === 视图组件 容器组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Login from '@/views/Login.vue'
import Notfound from '@/views/Notfound.vue'
import Admin from '@/views/Admin'
import Dashboard from '@/views/Dashboard'
import User from '@/views/User'
import News from '@/views/News'
import Detail from '@/views/Detail'

// 以插件的方式添加
Vue.use(VueRouter)

// 实例化路由对象及配置路由表
const routes = [
  {
    // 匹配的路由
    path: '/home',
    // 匹配成功后要渲染的路由
    component: Home
  },
  {
    // 匹配的路由
    path: '/about',
    // 匹配成功后要渲染的路由
    component: About
  },
  {
    // 匹配的路由
    path: '/login',
    // 匹配成功后要渲染的路由
    component: Login
  },
  // 嵌套路由
  {
    path: '/admin',
    component: Admin,
    // 重定向
    redirect: '/admin/dashboard',
    // 嵌套路由
    children: [
      {
        // /admin/dashborad
        path: 'dashboard',
        component: Dashboard
      },
      {
        path: 'user',
        component: User
      }
    ]
  },
  {
    path: '/news',
    component: News
  },
  // 动态路由参数，一定要先定义，后使用
  {
    // :名称 定义动态路由参数的方式，可以定义N个  /:a/:b/:c
    // path: '/detail/:nid',
    // 可选路由参数
    path: '/detail/:nid?',
    component: Detail
  },
  {
    path: '/',
    // 重定向
    redirect: '/home'
  }
  // 以上的规则都没有匹配成功，则返回404
  // {
  //   path: '*',
  //   component: Notfound
  // }
]

const router = new VueRouter({
  // 路由模式
  mode: 'history',
  // 路由规则表
  routes
})

export default router
